import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:myflutterproject/basematerialwidgetsdemo.dart';

class AnimatedContainerDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => AnimatedContainerState();
}

class AnimatedContainerState extends State<AnimatedContainerDemo> {
  var color = Colors.orange;
  var width = 200.0;
  var height = 200.0;
  var matrix4Value = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedContainer'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            TextWidget('在改变宽高、颜色、矩阵边换等增加动画效果'),
            AnimatedContainer(
              height: height,
              width: width,
              color: color,
              duration: Duration(milliseconds: 1000),
              transform: Matrix4.rotationZ(matrix4Value),
            ),
            Padding(
              padding: EdgeInsets.all(20),
              child: ElevatedButton(
                onPressed: () {
                  setState(() {
                    color = Colors.blue;
                  });
                },
                child: Text(
                  '改变颜色',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(0),
              child: ElevatedButton(
                onPressed: () {
                  setState(() {
                    height = 400;
                    width = 100;
                  });
                },
                child: Text(
                  '改变宽高',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(20),
              child: ElevatedButton(
                onPressed: () {
                  setState(() {
                    matrix4Value = 0.3;
                  });
                },
                child: Text(
                  '矩阵旋转',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(0),
              child: ElevatedButton(
                onPressed: () {
                  setState(() {
                    color = Colors.orange;
                    width = 200.0;
                    height = 200.0;
                    matrix4Value = 0.0;
                  });
                },
                child: Text(
                  '恢复',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
